import React, { useState, useEffect } from 'react';
import StudyPage from './pages/StudyPage';
import StatisticsPage from './pages/StatisticsPage';
import WordService from './services/wordService';
import './styles/main.css';

const App: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'study' | 'stats'>('study');

  useEffect(() => {
    // 初始化应用
    const initApp = async () => {
      await WordService.initializeWords();
    };

    initApp();
  }, []);

  return (
    <div className="app">
      <header className="app-header">
        <h1>单词记忆助手</h1>
        <nav className="tab-navigation">
          <button
            className={activeTab === 'study' ? 'active' : ''}
            onClick={() => setActiveTab('study')}
          >
            学习
          </button>
          <button
            className={activeTab === 'stats' ? 'active' : ''}
            onClick={() => setActiveTab('stats')}
          >
            统计
          </button>
        </nav>
      </header>

      <main className="app-main">
        {activeTab === 'study' ? <StudyPage /> : <StatisticsPage />}
      </main>
    </div>
  );
};


